<template>
  <div id="system_menu">
    <a-menu
      :defaultSelectedKeys="[selectKey]"
      :defaultOpenKeys="[openKey]"
      @select="go"
      mode="inline"
      theme="dark"
      :inlineCollapsed="$root.app.menuClosed"
    >
      <template v-for="item in data">
        <a-menu-item v-if="item.children.length<1" :key="item.permission_content">
          <a-icon :type="item.extra" />
          <span>{{item.permission_name}}</span>
        </a-menu-item>
        <a-sub-menu v-else :key="item.permission_content">
          <span slot="title">
            <a-icon :type="item.extra" />
            <span>{{item.permission_name}}</span>
          </span>
          <a-menu-item
            :key="`/${item.permission_content}/${subItem.permission_content}`"
            v-for="subItem in item.children"
          >{{subItem.permission_name}}</a-menu-item>
        </a-sub-menu>
      </template>
    </a-menu>
  </div>
</template>
<script>
//todo 根据url选中菜单
export default {
  data() {
    return {
      data: [],
      selectKey:'',
      openKey:'',
    };
  },
  // watch: {
  //   $route(to, from) {
  //     console.log(to.path);
  //     this.selectKey = to.path;
  //   }
  // },
  created() {
    this.getData();
    let key = this.$route.path;
    this.selectKey = key;
    let arr = key.split('/');
    arr.pop();
    this.openKey = arr.join('/')
  },
  methods: {
    async getData() {
      let result = await this.$post("/system/permission/getTop3LevelMenu", {
        levels: [0, 1]
      });
      this.data = result.data;
    },
    go(item) {
      this.$router.push(item.key);
    }
  }
};
</script>
<style scoped>
#system_menu {
  overflow-y: auto;
  flex: 1;
}
#system_menu::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: #000;
}

#system_menu::-webkit-scrollbar-track {
  border-radius: 0px;
  background-color: #000;
}

#system_menu::-webkit-scrollbar-thumb {
  border-radius: 0px;
  background-color: #555;
}
</style>

